// 用于大屏场景（industryAPPContainer）使用的全局通用部分样式，这为简易方案，后续对接也方便

// 这个版本为【黄底国土版】样式。！！！其他行业样式是在通用蓝底版基础上的修改，不是独立完整样式！！！

// 注意，这个文件中，所有的样式必须写在iwhale-前缀样式（如iwhale-industrystyle）之下，以保证不会影响到其他厂商；
// 也因此，这个文件暂时不能用于覆盖popper弹出层样式！依然必须在popper-class内附带专用的iwhale-industrystyle

// ！！！这里使用到的样式禁止!important声明！！！
// 保留实际组件覆盖的机会。这里的样式仅仅是用于尽可能的涵盖通用样式，以减少目前填坑的工作量

$IWLYTooltipBgColor: rgba(0, 34, 27, 0.95);
$IWLYDisableTextColor: rgba(255,255,255,0.7);
$IWGTPopBgColor: linear-gradient( 180deg, rgba(238,227,128,0.2) 0%, rgba(68,61,27,0.18) 57%, rgba(76,66,24,0) 100%), rgba(0,0,0,0.5);
$IWLYTooltipOffset: 6px;

.iwhale-industrystyle.gtstyle {
  // 基本
  --iw-theme-color: #fffa28;
  // 文字色
  --iw-text-color: #E4E7C1;
  // 表单标签色
  --iw-form-label-color: rgba(255, 238, 177, .7);
  --event-label-color: rgba(228,231,193,0.7);
  --event-active-color: #fffa28;
  --event-collect-color: #E4E7C1; // 告警详情里的收藏按钮颜色
  --event-collectactive-color: #fffa28;

  .el-tag,
  .el-select__tags .el-tag.el-tag--info {
    background-color: rgba(159, 152, 83, .2);
    color: #e4e7c1;
    border-color: transparent;
    .el-tag__close.el-icon-close {
      color: #e4e7c1;
    }
  }

  // 输入框覆写
  .el-input {
    .el-input-group__prepend {
      background-color: rgba(100,86,46,0.4);
    }
    .el-input__inner {
      background-color: rgba(100,86,46,0.4);
      color: #e4e7c1;
      &:not([readonly]):not([disabled]) {
        &:hover {
          border-color: rgba(100,86,46,0.6);
        }
        &:focus {
          border-color: rgba(100,86,46, 1);
        }
      }
      &::placeholder {
        color: rgba(228,231,193,.6);
      }
    }
    &.is-focus {
      .el-input__inner {
        border-color: rgba(100,86,46, 1);
      }
    }
    &.is-disabled {
      .el-input__inner {
        border-color: transparent;
        background-color: rgba(100,86,46,0.4);
      }
    }
  }
  .el-input__inner {
    background-color: rgba(100,86,46,0.4);
    color: #e4e7c1;
    &:not([readonly]):not([disabled]) {
      &:hover {
        border-color: rgba(100,86,46,0.6);
      }
      &:focus {
        border-color: rgba(100,86,46, 1);
      }
    }
    &::placeholder {
      color: rgba(228,231,193,.6);
    }
  }
  .el-textarea__inner {
    background: rgba(100,86,46,0.4);
    color: #e4e7c1;
    border-color: transparent;
    &::placeholder {
      color: rgba(228,231,193,.6);
    }
    &:not([readonly]):not([disabled]) {
      &:hover {
        border-color: rgba(100,86,46, .6);
      }
      &:focus {
        border-color: rgba(100,86,46, 1);
      }
    }
  }

  // 按钮覆写
  .el-button {
    border: none;
    &.el-button--default {
      color: #FFEEB1;
      background: rgba(100, 86, 46, 0.71);
      border: 1px solid rgba(100, 86, 46, 1);
    }
    &.el-button--primary {
      position: relative;
      color: #FFEEB1;
      background: radial-gradient(circle at 50% -250%, rgba(255, 219, 117, .81) 0, transparent 89%), linear-gradient(180deg, rgba(255, 224, 72, .34), rgba(255, 241, 126, .1));
      border: none;
      &::before{
        content: '';
        position: absolute;
        inset: 0 0 0 0;
        pointer-events: none;
        background: url("~@/assets/image/video_gt/btn_l_t.png") no-repeat 0 0,
          url("~@/assets/image/video_gt/btn_l_b.png") no-repeat 0 100%,
          url("~@/assets/image/video_gt/btn_r_t.png") no-repeat 100% 0,
          url("~@/assets/image/video_gt/btn_r_b.png") no-repeat 100% 100%;
      }
    }
    &.el-button--danger {
      color: #FFEEB1;
      background: url('~@/assets/image/common/gt/btn-dangerbg.png');
      background-size: 100% 100%;
      border: none;
    }
    &.el-button--text {
      color: #FFEEB1;
      &:hover,
      &:focus {
        color: #FFEEB1;
      }
    }

    &:hover {
      opacity: 0.6;
    }
    &:active {
      opacity: 0.8;
    }
    &.is-disabled {
      opacity: 0.4;
    }
  }

  .el-tree {
    color: #e4e7c1;

    &.el-tree--highlight-current {
      .el-tree-node.is-current>.el-tree-node__content {
        background-color: rgba(122, 113, 61, .4);
      }
    }

    .el-tree-node {
      &:focus {
        >.el-tree-node__content {
          background-color: rgba(122, 113, 61, .4);
        }
      }
      .el-tree-node__content:hover {
        background-color: rgba(122, 113, 61, .4);
      }
    }
  }

  // 下拉框覆写
  .el-select {
    .el-input{
      &.is-focus {
        .el-input__inner {
          border-color: rgba(122,113,61,1);
        }
      }
    }
    .el-input__inner,
    .el-input__inner[readonly] {
      color: var(--iw-text-color);
      &::placeholder {
        color: rgba(228,231,193,.6);
      }
      &:focus {
        border-color: rgba(122,113,61,1);
      }
    }
    &:hover {
      .el-input__inner {
        border-color: rgba(122,113,61, .6);
      }
    }
  }
  &.el-select-dropdown {
    background: $IWGTPopBgColor;
    border-color: #6e674e;

    // 多选时，下拉的选中项目不需要背景色
    &.is-multiple {
      .el-select-dropdown__item {
        .el-checkbox {
          &.is-checked .el-checkbox__label {
            color: #fffa28;
          }
          .el-checkbox__label {
            color: #e4e7c1;
          }
        }
      }
    }

    .el-select-dropdown__list {
      padding: 0;
    }
    .el-select-dropdown__empty {
      color: #e4e7c1;
    }

    .el-select-dropdown__item {
      color: #e4e7c1;
      font-weight: 400;

      // 按照设计师要求，覆写el-select原本的滞留hover属性，只有严格悬停才会hover
      &.hover {
        background-color: transparent;
        &:hover {
          background-color: rgba(122, 113, 61, .4);
        }
      }
      &:hover {
        background-color: rgba(122, 113, 61, .4);
      }

      &.selected {
        color: #fffa28;
        background-color: rgba(122, 113, 61, .4);

        &.hover {
          color: #fffa28;
        }
      }
    }
  }

  // 单选框覆写
  // 单选框覆写
  .el-radio {
    .el-radio__input {
      .el-radio__inner {
        border-color: rgba(159, 152, 83, 1);
        background: transparent;
      }
      &.is-checked {
        .el-radio__inner::after {
          background-color: #ffffff;
          width: 6px;
          height: 6px;
        }
        .el-radio__inner {
          border-color: rgba(159, 152, 83, 1);
          background: rgba(159, 152, 83, 1);
        }
      }
    }
    &.is-checked {
      .el-radio__label {
        color: #E4E7C1;
      }
    }
    .el-radio__label {
      color: #E4E7C1;
    }
  }


  // 复选框覆写
  .el-checkbox {
    .el-checkbox__label {
      color: #e4e7c1;
      font-weight: 400;
    }

    .el-checkbox__input {
      .el-checkbox__inner {
        width: 16px;
        height: 16px;
        background-color: transparent;
        border-radius: 3px;
        border: 1px solid #9f9853;
      }
      &.is-checked {
        .el-checkbox__inner {
          background-color: #9f9853;
          border-color: #9f9853;
          &::after {
            left: 5px;
            top: 2px;
          }
        }
        .el-checkbox__label {
          color: #fffa28;
        }
      }
      &.is-indeterminate {
        .el-checkbox__inner {
          background-color: #9f9853;
          border-color: #9f9853;

          &::before {
            height: 4px;
            top: 6px;
          }
        }
      }
    }
  }

  // 开关覆写
  .el-switch {
    span.el-switch__core {
      background: rgba(100, 86, 46, 0.71);
      border-color: rgba(100, 86, 46, 0.71);
    }
    &.is-checked {
      span.el-switch__core {
        background: rgb(159, 152, 83);
        border-color: rgb(159, 152, 83);
      }
    }
  }

  // 时间选择器覆写
  .el-date-editor {
    .el-range-input {
      color: var(--iw-text-color);
      background: transparent;
      font-size: 14px;
    }
    .el-range-separator {
      font-size: 14px;
      color: var(--iw-text-color);
      width: 20px;
    }
    &.el-input__inner {
      border-color: transparent;
      background: rgba(100,86,46,0.4);
      align-items: center;
    }
    // 设计师好像要求的是这个图标，对使用这个图标的日期选择器做统一处理
    i.iconfont_tools.icon-tongyong-shaixuanriqi {
      color: var(--iw-text-color);
      font-size: 18px;
      line-height: 25px;
      margin-right: 12px;
      &::before {
        // vertical-align: middle;
        // margin-top: 4px;
        margin-left: 12px;
      }
    }
  }
  // 时间弹出面板覆写
  &.el-date-range-picker.el-picker-panel {
    width: 490px;
    background: $IWGTPopBgColor;
    border-color: rgba(100,86,46, 1);
    border-radius: 8px;
    .el-picker-panel__content.el-date-range-picker__content {
      padding: 0;
      &.is-left {
        border-right: 1px solid rgba(228, 231, 193, 0.24);
      }
    }
    &.has-sidebar {
      width: 576px;
    }
    .el-picker-panel *[slot=sidebar], .el-picker-panel__sidebar {
      width: 80px;
      border-right: 1px solid rgba(228, 231, 193, 0.24);
      +.el-picker-panel__body {
        margin-left: 80px;
      }
    }
    .popper__arrow {
      display: none;
    }
    .el-date-range-picker__time-header {
      border-color: #3D4756;

      .el-icon-arrow-right {
        color: #E8F3FE;
      }
    }
    .el-picker-panel__sidebar {
      padding-top: 0;
      background: transparent;
      .el-picker-panel__shortcut {

        &:hover {
          background: rgba(2, 137, 109, 0.6);
          border-right: 1px solid rgba(228, 231, 193, 0.24);
        }
      }
    }
    .el-picker-panel__body {
      min-width: auto;
    }
    .el-date-range-picker__header {

      padding: 10px 8px;
      height: 32px;
      line-height: 12px;
      div {
        font-size: 14px;
        margin-left: 40px;
        margin-right: 40px;
        display: flex;
        justify-content: center;
      }
      .el-picker-panel__icon-btn {
        font-size: 20px;
        padding: 0;
        margin-top: -4px;


        // &.el-icon-d-arrow-left {
        //   font-family: 'iconfont_tools' !important;
        //   &::before {
        //     content: '\ea80'
        //   }
        // }
        // &.el-icon-arrow-left {
        //   font-family: 'iconfont_tools' !important;
        //   &::before {
        //     content: '\ea49'
        //   }
        // }
        // &.el-icon-d-arrow-right {
        //   font-family: 'iconfont_tools' !important;
        //   &::before {
        //     content: '\ea7e'
        //   }
        // }
        // &.el-icon-arrow-right {
        //   font-family: 'iconfont_tools' !important;
        //   &::before {
        //     content: '\ea47'
        //   }
        // }
      }
    }
    .el-date-table {
      padding: 0 12px 12px 12px;
      font-size: 14px;
      tr {
        th {

          text-align: center;
          border-bottom: 1px solid rgba(228, 231, 193, 0.24);
        }
      }
      th {
        padding: 0;
      }
      td {
        padding: 0;
        height: 32px;
        &.prev-month,
        &.next-month {
          color: rgba(255, 255, 255, 0.4);
        }
        div {
          height: 32px;
        }
        span {
          width: 28px;
          height: 28px;
          line-height: 28px;
          top: 2px;
        }
        &.today {
          span {
            color: #FFFA28;
          }
        }
        &.today.in-range {
          span {

          }
        }

        &.start-date {
          div {
            margin-left: 0;
            span {
            }
          }
        }
        &.end-date {
          div {
            margin-right: 0;
            span {
            }
          }
        }
      }
    }
    .el-date-table td.available:hover {
      color: #e4e7c1;
      span {
        background-color: #9F9853;
      }
    }
    .el-date-table td.disabled div {
      background-color: transparent;
      color: #E4E7C1;
    }
    .el-date-table td.in-range div {
      background-color: #7A713D;
    }
    .el-date-table td.start-date span, .el-date-table td.end-date span {
      background: #9F9853;
    }

    .el-picker-panel__footer {
      .el-button {
        border: none;
        &.el-button--text.el-picker-panel__link-btn {
          color: #FFEEB1;
          background: rgba(100, 86, 46, 0.71);
          border: 1px solid rgba(100, 86, 46, 1);
        }
        &.el-button--default {
          position: relative;
          color: #FFEEB1;
          background: radial-gradient(circle at 50% -250%, rgba(255, 219, 117, .81) 0, transparent 89%), linear-gradient(180deg, rgba(255, 224, 72, .34), rgba(255, 241, 126, .1));
          border: 1px solid;
          border-image: linear-gradient(180deg, rgba(255, 238, 177, 0.39), rgba(255, 248, 217, 0)) 1 1;
          // &::before{
          //   content: '';
          //   position: absolute;
          //   inset: 0 0 0 0;
          //   pointer-events: none;
          //   background: url("~@/views/pages/video/img/video-gt/btn_l_t.png") no-repeat 0 0,
          //     url("~@/views/pages/video/img/video-gt/btn_l_b.png") no-repeat 0 100%,
          //     url("~@/views/pages/video/img/video-gt/btn_r_t.png") no-repeat 100% 0,
          //     url("~@/views/pages/video/img/video-gt/btn_r_b.png") no-repeat 100% 100%;
          // }
        }
      }
    }
  }

  .el-time-panel,
  &.el-time-panel {
    border-radius: 8px;
    background: linear-gradient( 180deg, rgba(238,227,128,0.2) 0%, rgba(68,61,27,0.18) 57%, rgba(76,66,24,0) 100%), rgba(0,0,0,0.8);
    border-color: rgba(100,86,46, 1);

    .el-time-spinner__item {
      color: var(--iw-text-color);
      &.active {
        color: #fffa28;
      }
      &:hover:not(.disabled):not(.active) {
        background-color: rgba(122, 113, 61, .4);
      }
    }
    .el-time-panel__content::after, .el-time-panel__content::before {
      border-color: rgba(228, 231, 193, 0.24);
    }
    .el-time-spinner__wrapper {
      + .el-time-spinner__wrapper {
        border-left: 1px solid rgba(228, 231, 193, 0.24);
      }
    }
    .el-time-panel__btn {
      color: var(--iw-text-color);
      &.cancel {
        color: #FFEEB1;
        background: rgba(100, 86, 46, 0.71);
        border: 1px solid rgba(100, 86, 46, 1);
      }
      &.confirm {
        position: relative;
        color: #FFEEB1;
        background: radial-gradient(circle at 50% -250%, rgba(255, 219, 117, .81) 0, transparent 89%), linear-gradient(180deg, rgba(255, 224, 72, .34), rgba(255, 241, 126, .1));
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(255, 238, 177, 0.39), rgba(255, 248, 217, 0)) 1 1;
        // &::before{
        //   content: '';
        //   position: absolute;
        //   inset: 0 0 0 0;
        //   pointer-events: none;
        //   background: url("~@/views/pages/video/img/video-gt/btn_l_t.png") no-repeat 0 0,
        //     url("~@/views/pages/video/img/video-gt/btn_l_b.png") no-repeat 0 100%,
        //     url("~@/views/pages/video/img/video-gt/btn_r_t.png") no-repeat 100% 0,
        //     url("~@/views/pages/video/img/video-gt/btn_r_b.png") no-repeat 100% 100%;
        // }
      }
    }

    .el-time-panel__footer {
      border-color: #3D4756;
    }
  }

  // 表格覆写
  .el-table{
    // FIXME 看起来写在wrapper是通用应用原本就值得商榷的行为，待确认
    .el-table__header-wrapper {
      background: rgba(122,113,61,.36);
      color: rgb(255, 238, 177);
      th {
        background: none;
      }
    }
    &.el-table--enable-row-hover {
      .el-table__body tr {
        &:hover {
          td {
            background: rgba(122,113,61,.36);
            color: #fffa28;
          }
        }
      }
    }
  }

  // 分页组件
  .el-pagination.is-background.el-pagination--small,
  .el-pagination {
    .btn-prev, .btn-next {
      color: #e4e7c1;
      background: none;
    }
    li.number {
      background-color: transparent;
      border-radius: 4px;
      color: #e4e7c1;
      &:not(.disabled):hover {
        color: #fffa28;
      }
      &:not(.disabled).active {
        background-color: #9e9755;
        &:hover {
          color: #e4e7c1;
        }
      }
    }
  }

  // 表单覆写
  // 对于国土来讲主要是整个换色
  .el-form {
    .el-form-item .el-form-item__label {
      color: #e4e7c1;
    }
  }

  // 加载中覆写
  .el-loading-spinner {
    .el-loading-text {
      color: #e4e7c1;
    }
    i {
      color: #e4e7c1;
    }
  }

  .el-scrollbar__thumb {
    background-color: rgba(121,107,61,.76);
  }
  // 其他普通滚动条使用保底的覆盖样式
  ::-webkit-scrollbar,
  &::-webkit-scrollbar {
    width: 6px ;
    height: 6px ;
    border-radius: 3px ;
  }

  ::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-thumb {
    border-radius: 3px ;
    background-color: rgba(121,107,61,.76);
    border: 0 ;
  }

  ::-webkit-scrollbar-thumb:hover,
  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144,147,153,.5);
  }
}
